<template>
  <!-- 确认模态框组件 -->
  <div class="confirm-modal">
    <!-- 模态框的遮罩层，点击遮罩层触发 cancel 方法 -->
    <div class="modal-overlay" @click.self="cancel"></div>
    <!-- 模态框的容器 -->
    <div class="modal-container">
      <!-- 模态框的内容 -->
      <div class="modal-content">
        <!-- 模态框的主体部分 -->
        <div class="modal-body">
          <!-- 模态框的图标区域 -->
          <div class="modal-icon">
            <!-- 一个 SVG 图标 -->
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" fill="#F59E0B"/>
              <path d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="white"/>
              <path d="M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V12Z" fill="white"/>
            </svg>
          </div>
          <!-- 模态框的标题，若未传入则显示默认值 -->
          <h3 class="modal-title">{{ title || '确认操作' }}</h3>
          <!-- 模态框的消息内容 -->
          <p class="modal-message">{{ message }}</p>
        </div>
        <!-- 模态框的操作按钮区域 -->
        <div class="modal-actions">
          <!-- 取消按钮，点击触发 cancel 方法 -->
          <button class="btn btn-cancel" @click="cancel">取消</button>
          <!-- 确认按钮，点击触发 confirm 方法 -->
          <button class="btn btn-confirm" @click="confirm">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'ConfirmModal',
  // 组件接收的属性
  props: {
    message: {
      // 属性类型为字符串
      type: String,
      // 属性为必需项
      required: true
    },
    title: {
      // 属性类型为字符串
      type: String,
      // 属性默认值为空字符串
      default: ''
    }
  },
  methods: {
    // 确认操作方法，触发父组件的 confirm 事件
    confirm() {
      this.$emit('confirm');
    },
    // 取消操作方法，触发父组件的 cancel 事件
    cancel() {
      this.$emit('cancel');
    }
  }
}
</script>

<style lang="less" scoped>
// 颜色变量
@primary: #4361EE;
@primary-light: #A5B4FC;
@secondary: #3A0CA3;
@success: #10B981;
@warning: #F59E0B;
@danger: #EF4444;
@gray-100: #F3F4F6;
@gray-200: #E5E7EB;
@gray-300: #D1D5DB;
@gray-400: #9CA3AF;
@gray-500: #6B7280;
@gray-600: #4B5563;
@gray-700: #374151;
@gray-800: #1F2937;
@gray-900: #111827;

// 阴影样式
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
@shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

// 圆角样式
@radius-sm: 0.375rem;
@radius-md: 0.5rem;
@radius-lg: 0.75rem;
@radius-xl: 1rem;

// 过渡效果
@transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

// 确认模态框样式
.confirm-modal {
  // 固定定位，覆盖整个屏幕
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // 层级为 1000，确保在其他元素之上
  z-index: 1000;
  // 弹性布局，水平和垂直居中
  display: flex;
  justify-content: center;
  align-items: center;
  // 内边距
  padding: 1rem;

  // 模态框遮罩层样式
  .modal-overlay {
    // 绝对定位，覆盖整个屏幕
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // 半透明黑色背景
    background: rgba(0, 0, 0, 0.5);
    // 模糊效果
    backdrop-filter: blur(4px);
    // 淡入动画
    animation: fadeIn 0.3s ease-out;
  }

  // 模态框容器样式
  .modal-container {
    // 相对定位
    position: relative;
    // 宽度为 100%
    width: 100%;
    // 最大宽度为 400px
    max-width: 400px;
    // 模态框进入动画
    animation: modalEnter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  }

  // 模态框内容样式
  .modal-content {
    // 白色背景
    background: white;
    // 大圆角边框
    border-radius: @radius-lg;
    // 隐藏溢出内容
    overflow: hidden;
    // 大阴影效果
    box-shadow: @shadow-xl;
    // 初始向下偏移 20px
    transform: translateY(20px);
    // 初始透明度为 0
    opacity: 0;
  }

  // 模态框主体样式
  .modal-body {
    // 内边距
    padding: 2rem 1.5rem;
    // 文本居中
    text-align: center;

    // 模态框图标样式
    .modal-icon {
      // 底部外边距
      margin-bottom: 1.5rem;
      // 弹性布局，水平居中
      display: flex;
      justify-content: center;
    }

    // 模态框标题样式
    .modal-title {
      // 去除默认外边距
      margin: 0 0 0.5rem;
      // 字体大小
      font-size: 1.25rem;
      // 字体粗细
      font-weight: 600;
      // 字体颜色
      color: @gray-900;
    }

    // 模态框消息样式
    .modal-message {
      // 去除默认外边距
      margin: 0;
      // 字体大小
      font-size: 0.9375rem;
      // 字体颜色
      color: @gray-600;
      // 行高
      line-height: 1.5;
    }
  }

  // 模态框操作按钮区域样式
  .modal-actions {
    // 弹性布局
    display: flex;
    // 顶部边框
    border-top: 1px solid @gray-200;

    // 按钮样式
    .btn {
      // 弹性占比为 1
      flex: 1;
      // 内边距
      padding: 1rem;
      // 字体大小
      font-size: 0.9375rem;
      // 字体粗细
      font-weight: 500;
      // 无边框
      border: none;
      // 无背景
      background: none;
      // 鼠标指针样式为手型
      cursor: pointer;
      // 过渡效果
      transition: @transition;

      // 第一个按钮样式
      &:first-child {
        // 右侧边框
        border-right: 1px solid @gray-200;
      }

      // 取消按钮样式
      &.btn-cancel {
        // 字体颜色
        color: @gray-600;

        // 鼠标悬停样式
        &:hover {
          // 背景颜色
          background: @gray-100;
          // 字体颜色
          color: @gray-800;
        }
      }

      // 确认按钮样式
      &.btn-confirm {
        // 字体颜色
        color: @primary;
        // 字体粗细
        font-weight: 600;

        // 鼠标悬停样式
        &:hover {
          // 背景颜色
          background: rgba(@primary, 0.05);
        }
      }
    }
  }
}

// 淡入动画
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

// 模态框进入动画
@keyframes modalEnter {
  to {
    // 垂直偏移为 0
    transform: translateY(0);
    // 透明度为 1
    opacity: 1;
  }
}

// 媒体查询，当屏幕宽度小于等于 480px 时的样式
@media (max-width: 480px) {
  .modal-actions {
    // 垂直排列按钮
    flex-direction: column;

    .btn:first-child {
      // 去除右侧边框
      border-right: none;
      // 添加底部边框
      border-bottom: 1px solid @gray-200;
    }
  }
}
</style>